<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>
  <script src="../../cdn/vue/vue.global.min.js"></script>
  <link rel="stylesheet" href="../../cdn/element-plus/index.css" />
  <script src="../../cdn/element-plus/index.full.min.js"></script>

  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    <el-button @click="handle" style="margin-left: 20px">{{title}}</el-button>
    <avue-form :option="option" v-model="obj" @submit="submit">
      <template #name="{row,disabled}">
        <avue-input v-model="obj.names" :disabled="disabled"></avue-input>
      </template>
      <template #jbxx-header="{column}">
        <span>{{column.label}}</span>
      </template>
    </avue-form>
  </div>
</body>
<script>
  let baseUrl = 'https://cli.avuejs.com/api/area'
  var app = Vue.createApp({
    computed: {
      title() {
        return this.type === 0 ? '编辑' : '保存'
      },
    },
    data() {
      return {
        type: 1,
        obj: {
          name: '11',
          name1: '123'
        },
        option: {
          detail: false,
          column: [{
            label: '测试字段',
            prop: 'name'
          }, {
            label: '子表单',
            prop: 'dynamic',
            type: 'dynamic',
            span: 24,
            span: 16,
            children: {
              rowAdd: (done) => {
                this.$message.success('新增回调')
                done({ input: 3 })
              },
              rowDel: (row, done) => {
                this.$message.success('删除回调' + JSON.stringify(row))
                done();
              },
              height: 300,
              align: 'center',
              headerAlign: 'center',
              column: [{
                width: 200,
                label: '输入框',
                prop: "input",
              }, {
                width: 200,
                label: '密码框',
                prop: "password",
                type: 'password',
                rules: [
                  {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                  }
                ]
              }, {
                width: 200,
                label: '树型',
                prop: "tree",
                type: 'tree',
                dicData: [{
                  label: '1-1',
                  value: 0,
                  children: [{
                    label: "2-1",
                    value: 1
                  }]
                }]
              }, {
                width: 200,
                label: '选择框',
                prop: "select",
                type: 'select',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '多选',
                prop: "checkbox",
                type: 'checkbox',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '开关',
                prop: "switch",
                type: 'switch',
                dicData: [{
                  label: '测试1',
                  value: 1
                }, {
                  label: '测试2',
                  value: 2
                }]
              }, {
                width: 200,
                label: '数字框',
                prop: "number",
                type: 'number'
              }]
            },
            rules: [
              {
                required: true,
                message: '必填项测试',
                trigger: 'blur'
              }
            ]
          }],
          group: [
            {
              label: '用户信息',
              prop: 'jbxx',
              collapse: false,
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: '姓名',
                  prop: 'name',
                  rules: [
                    {
                      required: true,
                      message: '请输入姓名',
                      trigger: 'blur'
                    }
                  ]
                }
              ]
            }, {
              label: '退款申请',
              prop: 'tksq',
              arrow: false,
              icon: 'el-icon-view',
              column: [
                {
                  label: '省份',
                  prop: 'province',
                  type: 'select',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  cascader: ['city'],
                  dicUrl: `${baseUrl}/getProvince`,
                  rules: [
                    {
                      required: true,
                      message: '请选择省份',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '城市',
                  prop: 'city',
                  type: 'select',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  cascader: ['area'],
                  dicUrl: `${baseUrl}/getCity/{{key}}`,
                  rules: [
                    {
                      required: true,
                      message: '请选择城市',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '地区',
                  prop: 'area',
                  type: 'select',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  dicUrl: `${baseUrl}/getArea/{{key}}`,
                  rules: [
                    {
                      required: true,
                      message: '请选择地区',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '多选',
                  prop: 'checkbox',
                  type: 'checkbox',
                  props: {
                    label: 'name',
                    value: 'code'
                  },
                  span: 24,
                  dicUrl: `${baseUrl}/getProvince`
                }
              ]
            }
            , {
              label: '用户信息',
              prop: 'yhxx',
              icon: 'el-icon-edit-outline',
              column: [
                {
                  label: '测试长度',
                  prop: 'len',
                  maxlength: 5,
                }, {
                  label: 'radio',
                  prop: 'radio',
                  type: 'radio',
                  dicData: [{
                    label: 1,
                    value: 1
                  }, {
                    label: 2,
                    value: 2
                  }]
                }, {
                  label: '测试自定义',
                  prop: 'names'
                }
              ]
            }
          ]
          , footer: [{
            label: '尾部表单',
            prop: 'footer'
          }]
        }
      }
    },
    mounted() {
      setTimeout(() => {
        this.obj = {
          name: '111',
          province: '110000',
          city: '110100',
          area: '110101',
          radio: 1,
          dynamic: [{
            input: 1,
            select: 1,
            radio: 1,
          }, {
            input: 2,
            select: 2,
            radio: 1,
          }],
          checkbox: ['110000']
        }
      }, 100)
    },
    methods: {
      handle() {
        if (this.type === 1) {
          this.type = 0;
          this.option.detail = true
        } else {
          this.type = 1;
          this.option.detail = false
        }
      },
      submit() {
        this.$message.success(JSON.stringify(this.obj))
      }
    }
  })
  app.use(ElementPlus)
  app.use(AVUE)
  app.mount('#app')
</script>

</html>